<?
session_start();
if (!isSet($_SESSION['uid'])) {
    print "<meta http-equiv=\"refresh\" content=\"0;url=index.html\">";
    exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Exercise</title>
	<meta name="viewport" content="width=1280, user-scalable=no"/>  
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="./jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var exercise_id = <? print $exercise_id; ?>;
    </script>
    <script src="./kb_ex.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="./kb.css" /> 
</head>
<body>

<div id="screen" style="display">
	<div id="text">
	</div>
</div>

<div id="keys" style="display">
	<div class="row">
		<button data-key-value="`" data-secondary-value="~">~<br>`</button>
		<button data-key-value="1" data-secondary-value="!">!<br>1</button>
		<button data-key-value="2" data-secondary-value="@">@<br>2</button>
		<button data-key-value="3" data-secondary-value="#">#<br>3</button>
		<button data-key-value="4" data-secondary-value="$">$<br>4</button>
		<button data-key-value="5" data-secondary-value="%">%<br>5</button>
		<button data-key-value="6" data-secondary-value="^">^<br>6</button>
		<button data-key-value="7" data-secondary-value="&">&<br>7</button>
		<button data-key-value="8" data-secondary-value="*">*<br>8</button>
		<button data-key-value="9" data-secondary-value="(">(<br>9</button>
		<button data-key-value="0" data-secondary-value=")">)<br>0</button>
		<button data-key-value="-" data-secondary-value="_">_<br>-</button>
		<button data-key-value="=" data-secondary-value="+">+<br>=</button>
		<button class="delete">delete</button>
	</div>
	<div class="row">
		<button class="tab">tab</button>
		<button id="key-q" data-key-value="q">Q</button>
		<button id="key-w" data-key-value="w">W</button>
		<button id="key-e" data-key-value="e">E</button>
		<button id="key-r" data-key-value="r">R</button>
		<button id="key-t" data-key-value="t">T</button>
		<button id="key-y" data-key-value="y">Y</button>
		<button id="key-u" data-key-value="u">U</button>
		<button id="key-i" data-key-value="i">I</button>
		<button id="key-o" data-key-value="o">O</button>
		<button id="key-p" data-key-value="p">P</button>
		<button data-key-value="[" data-secondary-value="{">{<br>[</button>
		<button data-key-value="]" data-secondary-value="}">}<br>]</button>
		<button data-key-value="\" data-secondary-value="|">|<br>\</button>
	</div>
	<div class="row">
		<button class="caps-lock">caps lock</button>
		<button id="key-a" data-key-value="a">A</button>
		<button id="key-s" data-key-value="s">S</button>
		<button id="key-d" data-key-value="d">D</button>
		<button id="key-f" data-key-value="f">F</button>
		<button id="key-g" data-key-value="g">G</button>
		<button id="key-h" data-key-value="h">H</button>
		<button id="key-j" data-key-value="j">J</button>
		<button id="key-k" data-key-value="k">K</button>
		<button id="key-l" data-key-value="l">L</button>
		<button data-key-value=";" data-secondary-value=":">:<br>;</button>
		<button data-key-value="'" data-secondary-value="&quot;">"<br>'</button>
		<button class="return">return</button>
	</div>
	<div class="row">
		<button class="shift">shift</button>
		<button id="key-z" data-key-value="z">Z</button>
		<button id="key-x" data-key-value="x">X</button>
		<button id="key-c" data-key-value="c">C</button>
		<button id="key-v" data-key-value="v">V</button>
		<button id="key-b" data-key-value="b">B</button>
		<button id="key-n" data-key-value="n">N</button>
		<button id="key-m" data-key-value="m">M</button>
		<button data-key-value="," data-secondary-value="&#60;">&#60;<br>,</button>
		<button data-key-value="." data-secondary-value="&#62;">&#62;<br>.</button>
		<button data-key-value="/" data-secondary-value="?">?<br>/</button>
		<button class="shift">shift</button>
	</div>
	<div class="row">
		<button>fn</button>
		<button>ctrl</button>
		<button>alt</button>
		<button class="command">&#8984;</button>
		<button class="spacebar" data-key-value=" "></button>
		<button class="command">&#8984;</button>
		<button>alt</button>
		<div id="arrows">
			<button class="left">&larr;</button>
			<button class="up">&uarr;</button>
			<button class="down">&darr;</button>
			<button class="right">&rarr;</button>
		</div>
	</div>
</div>

<!--div id="info">Keyboard built by <a href="http://sutherlandboswell.com">Sutherland Boswell</a>, inspired by <a href=" http://dribbble.com/shots/455602-Apple-Keyboard">Levi Wintering</a>.</div-->
<!--<input type="text" id="answer"/>
<input type="text" id="input"/>-->
</body>
</html>
